<template>
  <object :data="src" :width="width" :height="height" type="image/svg+xml" v-on:load="fill(color)"></object>
</template>
<script>
export default {
  name: '',
  props: {
    width: {type: String},
    height: {type: String},
    src: {type: String},
    color: {type: String}
  },
  methods: {
    fill(color) {
      let items = this.$el.contentDocument.getElementsByTagName('path')
      for (let i = 0; i < items.length; i++) {
        items[i].setAttribute('fill', color)
      }
    }
  },
  watch: {
    color: function (newData, oldData) {
      this.fill(newData)
    }
  }
}
</script>
<style lang=''>
</style>
